const gulp = require('gulp'),
    htmlmin=require('gulp-htmlmin'),
    uglify=require('gulp-uglify'),
    babel=require('gulp-babel'),
    connect=require('gulp-connect'),
    sass=require('gulp-sass'),
    cleanCss=require('gulp-clean-css')


gulp.task('html',()=>{
    gulp.src('src/**/*.html')
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
               collapseWhitespace: true,//压缩HTML
               collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
               removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
               removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
               removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
               minifyJS: true,//压缩页面JS
               minifyCSS: true//压缩页面CSS 
        }))
        .pipe(gulp.dest('dist'))
        .pipe(connect.reload()) //使用热更新
})

    //制定css任务
    gulp.task('css',()=>{
        gulp.src('src/css/**/*.scss')
            .pipe(sass())
            .pipe(cleanCss())
            .pipe(gulp.dest('dist/css'))
            .pipe(connect.reload())
    })

     //制定js任务
     gulp.task('js',()=>{
        gulp.src('src/js/**/*.js')
            .pipe(babel({
                presets: ['@babel/env']
            }))
            .pipe(uglify())
            .pipe(gulp.dest('dist/js'))
            .pipe(connect.reload())
    })

    //制定一个开启服务器的任务
    gulp.task('server',()=>{
        connect.server({
            //跟目录
            root:'dist' ,
            port:1908,
            //支持热更新
            livereload:true
        })
    })

    //制定img任务,只需要移动到dist里面就好了
    gulp.task('img',()=>{
        gulp.src('src/images/**/*')
            .pipe(gulp.dest('dist/images'))
    })

    //制定libs任务
    gulp.task('libs',()=>{
        gulp.src('src/libs/**/*')
            .pipe(gulp.dest('dist/libs'))
    })

    //制定watch任务,用于实时更新
    gulp.task('watch',()=>{
        gulp.watch('src/**/*.html',['html'])
        gulp.watch('src/js/**/*.js',['js'])
        gulp.watch('src/css/**/*.scss',['css'])
    })
    //默认
    gulp.task('default',['html','js','css','server','img','libs','watch'])